{% extends "base.html" %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h3 class="card-title">编辑证件信息</h3>
    </div>
    <div class="card-body">
        <form method="POST" enctype="multipart/form-data">
            <div class="row">
                <div class="col-md-6">
                    <h5 class="mb-3">身份证信息</h5>
                    <div class="mb-3">
                        <label for="id_card_front" class="form-label">身份证正面</label>
                        {% if employee.id_card_front %}
                            <div class="mb-2">
                                <img src="{{ url_for('static', filename=employee.id_card_front) }}" alt="身份证正面" class="img-thumbnail" style="max-height: 100px;">
                            </div>
                        {% endif %}
                        <input type="file" class="form-control" id="id_card_front" name="id_card_front" accept="image/*">
                    </div>
                    <div class="mb-3">
                        <label for="id_card_back" class="form-label">身份证反面</label>
                        {% if employee.id_card_back %}
                            <div class="mb-2">
                                <img src="{{ url_for('static', filename=employee.id_card_back) }}" alt="身份证反面" class="img-thumbnail" style="max-height: 100px;">
                            </div>
                        {% endif %}
                        <input type="file" class="form-control" id="id_card_back" name="id_card_back" accept="image/*">
                    </div>
                </div>
                <div class="col-md-6">
                    <h5 class="mb-3">学历学位证书</h5>
                    <div class="mb-3">
                        <label for="diploma" class="form-label">学历证书</label>
                        {% if employee.diploma %}
                            <div class="mb-2">
                                {% if employee.diploma.endswith('.pdf') %}
                                    <a href="{{ url_for('static', filename=employee.diploma) }}" target="_blank" class="btn btn-sm btn-info">查看PDF</a>
                                {% else %}
                                    <img src="{{ url_for('static', filename=employee.diploma) }}" alt="学历证书" class="img-thumbnail" style="max-height: 100px;">
                                {% endif %}
                            </div>
                        {% endif %}
                        <input type="file" class="form-control" id="diploma" name="diploma" accept="image/*,.pdf">
                    </div>
                    <div class="mb-3">
                        <label for="degree" class="form-label">学位证书</label>
                        {% if employee.degree %}
                            <div class="mb-2">
                                {% if employee.degree.endswith('.pdf') %}
                                    <a href="{{ url_for('static', filename=employee.degree) }}" target="_blank" class="btn btn-sm btn-info">查看PDF</a>
                                {% else %}
                                    <img src="{{ url_for('static', filename=employee.degree) }}" alt="学位证书" class="img-thumbnail" style="max-height: 100px;">
                                {% endif %}
                            </div>
                        {% endif %}
                        <input type="file" class="form-control" id="degree" name="degree" accept="image/*,.pdf">
                    </div>
                </div>
            </div>

            <!-- 添加其他证书编辑部分 -->
            <div class="row mt-4">
                <div class="col-12">
                    <h5 class="mb-3">其他证书</h5>
                    <div id="other-certificates">
                        {% if employee.other_certificates %}
                            {% for cert in employee.other_certificates %}
                                <div class="certificate-entry border rounded p-3 mb-3">
                                    <div class="mb-3">
                                        <label class="form-label">证书名称</label>
                                        <input type="text" class="form-control" name="cert_name" value="{{ cert.name }}" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">证书文件</label>
                                        {% if cert.image %}
                                            <div class="mb-2">
                                                {% if cert.image.endswith('.pdf') %}
                                                    <a href="{{ url_for('static', filename=cert.image) }}" target="_blank" class="btn btn-sm btn-info">查看PDF</a>
                                                {% else %}
                                                    <img src="{{ url_for('static', filename=cert.image) }}" alt="{{ cert.name }}" class="img-thumbnail" style="max-height: 100px;">
                                                {% endif %}
                                                <div class="text-muted small mt-1">文件路径: {{ cert.image }}</div>
                                            </div>
                                        {% else %}
                                            <div class="text-muted">未上传</div>
                                        {% endif %}
                                        <input type="file" class="form-control" name="cert_file" accept="image/*,.pdf">
                                    </div>
                                    <button type="button" class="btn btn-danger btn-sm remove-certificate">删除证书</button>
                                </div>
                            {% endfor %}
                        {% endif %}
                    </div>
                    <button type="button" class="btn btn-secondary" id="add-certificate">添加证书</button>
                </div>
            </div>

            <div class="mt-4">
                <button type="submit" class="btn btn-primary">保存</button>
                <a href="{{ url_for('employee.employee_detail', id=employee.id) }}" class="btn btn-secondary">返回</a>
            </div>
        </form>
    </div>
</div>

<!-- 添加证书模板 -->
<template id="certificate-template">
    <div class="certificate-entry border rounded p-3 mb-3">
        <div class="mb-3">
            <label class="form-label">证书名称</label>
            <input type="text" class="form-control" name="cert_name" required>
        </div>
        <div class="mb-3">
            <label class="form-label">证书文件</label>
            <input type="file" class="form-control" name="cert_file" accept="image/*,.pdf">
        </div>
        <button type="button" class="btn btn-danger btn-sm remove-certificate">删除证书</button>
    </div>
</template>

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const certificatesContainer = document.getElementById('other-certificates');
    const addButton = document.getElementById('add-certificate');
    const template = document.getElementById('certificate-template');

    // 添加证书
    addButton.addEventListener('click', function() {
        const newCertificate = template.content.cloneNode(true);
        certificatesContainer.appendChild(newCertificate);
        
        // 更新所有删除按钮的事件监听
        updateRemoveButtons();
    });

    // 更新删除按钮事件监听
    function updateRemoveButtons() {
        document.querySelectorAll('.remove-certificate').forEach(button => {
            button.onclick = function() {
                const entry = this.closest('.certificate-entry');
                const index = Array.from(certificatesContainer.children).indexOf(entry);
                
                // 发送删除请求到后端
                fetch(`/employee/delete_file/{{ employee.id }}/other_cert_${index}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // 删除成功，从DOM中移除元素
                        entry.remove();
                    } else {
                        alert('删除失败：' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('删除失败，请重试');
                });
            };
        });
    }

    // 初始化现有证书的删除按钮
    updateRemoveButtons();
});
</script>
{% endblock %}
{% endblock %} 